<template>
  <el-container class="msg-container">
   <el-header style="text-align: center;align-self:flex-start;"> <goback :content="title"></goback></el-header>
  <div class="container">
    <div class="leftSide">
      <!--header-->
      <div class="header">
        <div class="userimg">
          <img :src="usericon" class="cover">
        </div>
        <ul class="nav_icons">
          <li><i class="el-icon-chat-line-square"></i></li>
          <li><i class="el-icon-menu"></i></li>
        </ul>
      </div>
      <!--search-->
      <div class="search_chat">
        <div>
          <input type="text" placeholder="搜索..." v-model="username" @blur="searchUserMsg">
          <div class="search-icon"><i class="el-icon-search"></i></div>
        </div>
      </div>
      <!--ChatList-->
      <div class="chatlist" v-for="(user,uid) in chartList" :key="uid">
        <div class="block active" @click="getChartContent(user)">
          <div class="imgbx">
            <img :src="usericon" class="cover">
          </div>
          <div class="details">
            <div class="listHead">
              <h4>{{user.userFrom}}</h4>
              <p class="time">{{user.pub_date}}</p>
            </div>
            <div class="message_p">
              <p>{{user.desc}}</p>
            </div>
          </div>
        </div>
      </div>

    </div>


    <div class="rightSide">
      <div class="header">
        <div class="imgText">
          <div class="userimg">
            <img :src="usericon" class="cover">
          </div>
          <h4>{{currentUser}}<br><span>{{state}}</span></h4>
        </div>
        <ul class="nav_icons">
          <li><i class="el-icon-chat-line-square"></i></li>
          <li><i class="el-icon-menu"></i></li>
        </ul>
      </div>
      <!--chatbox-->
      <div class="chatBox">

        <div :class="content.class" v-for="(content,id) in chartContentList" :key="id">

          <p v-if="content.is_img == 1">
            <el-image
              style="width: 100px; height: 100px"
              :src="content.file_path"
              fit="fill">
            </el-image>
            <br>
            <span>{{content.pub_date}}</span>
          </p>

          <p v-else-if="content.is_img == 2">
            <el-link :href="content.file_path">
           <i class="el-icon-document" style="font-size: 30px;"><b style="font-size: 14px;color: #1E9FFF">文件</b></i>
            </el-link>
            <br>
            <span>{{content.pub_date}}</span>
          </p>

          <p v-else>
            {{content.desc}}
            <br>
            <span>{{content.pub_date}}</span>
           </p>
        </div>

      </div>

      <!--chat input-->
      <div class="chatbox_input">
        <ul class="nav_icons" style="padding: 0;">
          <li>
            <el-upload
              class="upload-demo"
              :action="upload_url"
              :on-success="handleChange"
              :show-file-list="false"
              accept="image/jpeg"
              :data="params"
              :before-upload="beforeAvatarUpload"
              >
              <i class="el-icon-picture"></i>
            </el-upload>
          </li>
          <li>
            <el-upload
              class="upload-demo"
              :action="upload_url"
              :on-success="handleChange"
              :show-file-list="false"
              :data="params"
            >
            <i class="el-icon-upload"></i>
            </el-upload>
          </li>
        </ul>

        <el-row>
          <el-col :span="20">
              <input type="text" v-model="sendMsg.desc">
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="sendEmail">发送<i class="el-icon-position"></i></el-button>
          </el-col>
        </el-row>


      </div>
    </div>

  </div>
  </el-container>

</template>

<script>
  import goback from "../common/goback";
  import {emailList,getChart,sendEmailMsg,searchUser} from "../../apilist/Email";

  export default {
        name: "email",
        data(){
            return {
                title: '邮箱',
                path: '/home',
                usericon: this.fun.BASE_URL + '/storage/static/img/nan.jpg',
                chartList: [],
                currentUser: '',
                state: '离线',
                chartContentList: [],
                params:{dir: 'email'},
                upload_url: this.fun.APP_VUE_UPLOAD_URL,
                sendMsg: {
                    'desc': '',
                    'file_path':'',
                    'uid_to':'',
                },
                username: '',
            }
        },
        components: {goback},
      methods: {
          getChartContent(user){
              this.currentUser = user.userFrom
              this.state = user.state ? '在线' : '离线';
              this.sendMsg.uid_to = user.uid_from;
              getChart({uid_from: user.uid_from}).then(res => {
                  this.chartContentList = res.data
              })
          },
          handleChange(res,file,fileList){
              const {ext,fileUrl} = res.data
              this.sendMsg.file_path = fileUrl
              let is_img = ext == 'image/jpeg' ? 1 : 2;
              let pub_date = this.fun.getNowDate()
              this.chartContentList.push({is_img: is_img,class: 'message my_message',file_path: fileUrl,pub_date: pub_date})
          },
          beforeAvatarUpload(file) {
              const isJPG = file.type === 'image/jpeg';
              const isLt2M = file.size / 1024 / 1024 < 2;

              if (!isJPG) {
                  this.$message.error('上传头像图片只能是 JPG 格式!');
              }
              if (!isLt2M) {
                  this.$message.error('上传头像图片大小不能超过 2MB!');
              }
              return isJPG && isLt2M;
          },
          sendEmail(){
              if(this.fun.isNull(this.sendMsg.desc)){
                  this.$message.error('发送信息不能为空');
                  return false;
              }
              sendEmailMsg(this.sendMsg).then(res => {
                  if(res.state == 'ok'){
                      this.$message({
                          type: 'success',
                          message: '发送成功',
                          onClose: () => {
                              this.sendMsg.desc = '';
                              this.sendMsg.file_path = '';
                              getChart({uid_from: this.sendMsg.uid_to}).then(res => {
                                  this.chartContentList = res.data
                              })
                          }
                      })
                  }
              })
          },
          searchUserMsg(){
              searchUser({username: this.username}).then(res => {
                  if(res.data.length > 0){
                      res.data.forEach((item,i) => {
                          this.chartList.push(item)
                      })
                  }
              })
          }
      },
        mounted() {
            emailList().then(res => {
                this.chartList = res.data
                if(this.chartList.length > 0){
                    this.getChartContent(this.chartList[0])
                }
            });
        }

    }
</script>

<style scoped>
  @import "../../../static/css/email.css";
</style>
